<!--
 * @Description: 进度条组件
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-09 14:45:20
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-11-09 14:45:20
 * @FilePath: /lieshou-app/components/z-slider.vue
-->

<template>
<view>
	<view class="progress">
		<view class="progress-bar" :style="{'width':press}">
			<view class="progress-value"></view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		name: "z-slider",
		props: ['press'],
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.progress {
		position: relative;
		width: 615rpx;
		height: 8rpx;
		background: rgba(198, 215, 253, 1);
		border-radius: 20px;
	}

	.progress-bar {
		position: absolute;
		left: 0;
		top: 0;
		height: 8rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: linear-gradient(90deg, rgba(182, 190, 253, 1) 0%, rgba(74, 57, 255, 1) 100%);
		// 
		font-size: 12rpx;
		color: #fff;
		text-align: center;
		-webkit-transition: 80% .6s ease;
		-o-transition: 80% .6s ease;
		transition: 80% .6s ease;
		animation: animate-positive 2s;
	}

	@-webkit-keyframes animate-positive {
		0% {
			width: 0%;
		}
	}

	@keyframes animate-positive {
		0% {
			width: 0%;
		}
	}
</style>